<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="../static/vue.min.js"></script>
    <script src="../static/bootstrap/assets/js/jquery.js"></script>
    <script src="https://underscorejs.org/underscore-min.js"></script>
    <style>
      input {
        padding: 5px;
        border: 1px solid #ddd;
        border-radius: 3px;
        outline: none;
      }
      .error input {
        border: 1px solid red;
      }
      .msg {
        display: none;
      }
      .error .msg {
        display: block;
      }
      img {
        max-width: 500px;
      }
      .group {
        margin: 20px 0;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 0px 0px 2px #ddd;
        transition: 700ms;
      }
      .group:hover {
        box-shadow: 0px 0px 15px #ddd;
      }
      button {
        padding: 5px 15px;
        border-radius: 1em;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div>
        <form method="POST" action="upload" enctype="multipart/form-data">
          <div :class="cx(!check() && 'error', 'group')">
            输入profile id: <input v-model="id" name="id" placeholder="profile id 应该是数字编号" /> <span v-if="!check()">请输入有效数字</span>
          </div>
          <div :class="cx(!hasPic1 && 'error', 'group')">
            coupon页内图：<input name="pic1" type="file" @change="onPic1Change" />
            <div v-if="hasPic1"> <img :src="pic1"/> </div>
          </div>
          <div :class="cx(!hasPic2 && 'error', 'group')">
            coupon列表图：<input name="pic2" type="file" @change="onPic2Change" />
            <div v-if="hasPic2"> <img :src="pic2"/> </div>
          </div>
          <div :class="cx(!hasPic3 && 'error', 'group')">
            coupon详情图：<input name="pic3" type="file" @change="onPic3Change" />
            <div v-if="hasPic3"> <img :src="pic3"/> </div>
          </div>
          <div v-if="check() && hasPic1 && hasPic2 && hasPic3">
            <button type="submit">提交</button>
          </div>
        </form>
      </div>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          id: '',
          item: {},
          pic1: null,
          pic2: null,
          pic3: null,
          hasPic1: false,
          hasPic2: false,
          hasPic3: false,
        },
        methods: {
          check: function() {
            return /^\d+$/.test(this.id);
          },
          cx: function() {
            return _.filter(arguments, Boolean).join(' ');
          },
          onPic1Change: function(e) {
            this._previewImage(1, e);
          },
          onPic2Change: function(e) {
            this._previewImage(2, e);
          },
          onPic3Change: function(e) {
            this._previewImage(3, e);
          },
          _previewImage: function(index, e) {
            var hasPicKey = 'hasPic'+(index);
            var picKey = 'pic'+(index);
            this[hasPicKey] = true;
            console.log('pic ', index, ' change', e);
            if (!e.target.files || !e.target.files[0]) {
              this[hasPicKey] = false;
              return;
            }
            var that = this;
            var fr = new FileReader();
            fr.onload = function(fre) {
              console.log('on file loaded', fre);
              that[picKey] = fre.target.result;
            }
            fr.readAsDataURL(e.target.files[0]);
          }
        },
      });
    </script>
  </body>
</html>
